<template>
  <!-- <div>
        <div class="oss_file">
            <input type="file" :id="id" :multiple="multiple" @change="doUpload"/>
        </div>
  </div>-->
  <div class="img-item add-img-item">
    <input type="file" ref="file" id="filesId" :multiple="true" @change="doUpload" />
    <i class="iconfont maker-jiahao"></i>
  </div>
</template>
<script>
import { getAuth } from '@/api/common.js';

// import OSS from 'ali-oss';

export default {
  name: 'ImgageUpload',
  props: {
    multiple: {
      type: Boolean,
      twoWay: false,
    },
    id: {
      type: String,
      twoWay: false,
    },
    // url: {
    //   type: Array,
    //   twoWay: true,
    // },
  },
  data() {
    return {
      client: null,
    };
  },
  mounted() {
    window.cb = (res) => {
      console.log('cb=', res);
    };
  },
  methods: {
    doUpload() {
      const OSS = require('ali-oss');
      getAuth({}).then((result) => {
        console.log('result', result);
        const config = {
          region: result.endpoint,
          accessKeyId: result.ak,
          accessKeySecret: result.sk,
          bucket: result.bucket,
        };

        // const formdata = new FormData();
        // formdata.append('region', result.endpoint);
        // formdata.append('accessKeyId', result.ak);
        // formdata.append('accessKeySecret', result.sk);
        // formdata.append('bucket', result.bucket);
        // 

        console.log('config=', config);
        this.client = new OSS(config);
        const files =this.$refs.file.files
        console.log('files=', files)
        console.log('files=', files)
        if (files.files) {
          const fileLen = document.getElementById('filesId').files;
          console.log('fileLen=', fileLen);
          // const resultUpload = [];
          fileLen.length &&
            fileLen.forEach((item) => {
              // console.log('item=', item);
              // this.putObject(item);
              this.client.put(item.name, item.file).then((res) => {
                console.log('files=res=', res);
              });
              // resultUpload.push(client.multipartUpload(item.name, item, {}))
            });
          // Promise.all(resultUpload).then(res => {
          //   console.log('files=res=', res)
          // })
        }
      });
    },
    async putObject(item) {
      try {
        let result = await this.client.put(item.name, item);
        console.log('result=', result);
      } catch (e) {
        console.log('E=', e);
      }
    },
  },
};
</script>
<style scoped lang="scss">
.img-item {
  width: 22vw;
  height: 22vw;
  margin: 1vw 1vw;
  // background-color: pink;
  box-sizing: border-box;
  border: 1px dashed #cccccc;
  position: relative;
  .icon-select {
    font-size: 20px;
    color: #ffffff;
    position: absolute;
    top: 5px;
    right: 5px;
    // color: rgba(0, 0, 0, 0.5);
  }
  .makerdui-selected {
    color: #ff7e00;
  }
  span {
    position: absolute;
    height: 20px;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 12px;
    text-align: center;
    line-height: 18px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    i {
      margin-right: 4px;
      color: #e4393c;
    }
  }
}
.add-img-item {
  position: relative;
  input {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: transparent;
    z-index: 10;
  }
  i {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 40px;
    color: #ff7e00;
    background-color: transparent;
    z-index: 1;
    transform: translateY(-50%) translateX(-50%);
  }
}
</style>